<template>
  <div class="top">
    <div class="container">
      <el-row type="flex" justify="space-between">
        <el-col class="logo" :span="6">
          <router-link to="/">
            <img src="../assets/logo.png" />
            <span>Vue简约博客</span>
          </router-link>
        </el-col>
        <el-col :span="6" class="nav-right">
          <el-menu
            default-active="/"
            mode="horizontal"
            active-text-color="#409EFF"
            @select="handleSelect"
          >
            <el-menu-item index="/">
              <i class="el-icon-s-home"></i>首页
            </el-menu-item>
            <el-menu-item index="/article">
              <i class="el-icon-edit"></i>创作中心
            </el-menu-item>
            <el-menu-item index="/message">
              <el-badge is-dot>
                <span class="msg"><i class="el-icon-bell"></i>消息中心</span>
              </el-badge>
            </el-menu-item>
            <el-menu-item v-if="!isLoginStatus" index="/login">
              <i class="el-icon-user"></i>登录
            </el-menu-item>
            <el-submenu index="" v-else class="login-user">
              <template slot="title">
                <img src="../assets/header.webp" />
              </template>
              <el-menu-item index="" @click="loginOutHandler()"
                >退出</el-menu-item
              >
            </el-submenu>
          </el-menu>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "BlogTopComponent",
  data() {
    return {
      activeIndex: "/article",
      logImg: "@/assets/logo.png",
      isLoginStatus: false,
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      if (!this.isLoginStatus && (key === "/article" || key === "/message")) {
        this.$confirm("还没有登录?", "提示", {
          confirmButtonText: "去登录",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$router.push("/login");
        });
        return false;
      }
      this.$router.push(key);
    },
    // 退出
    loginOutHandler() {
      window.sessionStorage.removeItem("logStatus");
      this.$router.push("/");
      window.location.reload();
    },
  },
  mounted() {
    let logStatus = window.sessionStorage.getItem("logStatus");
    if (logStatus === null) {
      this.isLoginStatus = false;
    } else {
      this.isLoginStatus = true;
    }
  },
};
</script>
<style scoped>
.container {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  background-color: white;
  z-index: 4;
}
.el-menu.el-menu--horizontal {
  border: 0px;
}
.el-row {
  border-bottom: solid 1px #e6e6e6;
}
.logo {
  cursor: pointer;
}
.logo img {
  width: 50px;
  height: 50px;
  margin-left: 15px;
  position: relative;
  top: 7px;
}
.logo span {
  font-size: 30px;
  font-weight: bold;
  position: relative;
  top: -10px;
  left: 11px;
}
.logo a {
  color: black;
  text-decoration: none;
}
.el-badge {
  margin-top: 18px;
}
.msg {
  position: relative;
  top: -18px;
}

.login-user img {
  width: 40px;
  height: 40px;
  border-radius: 40px;
}
</style>
